<template>
    <div class="tabs">
        <el-tag 
            v-for="(tag, index) in tags"
            :key="tag.name"
            :closable="tag.name !== 'home'"
            :effect = "$route.name === tag.name ? 'dark' : 'plain' "
            @click="changeMenu(tag)"
            @close="handleClose(tag, index)"
            size="small"
        >
            {{tag.label}}
        </el-tag>
    </div>
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    export default {
        name:'CommonTag',
        computed: {
            ...mapState({
                //注入tabsList到当前组件
                tags: state => state.tab.tabsList
            })
        },
        methods: {
            //注入tab.js中的closeTag
            ...mapMutations({
                //取close别名
                close: 'closeTag'
            }),
            //tag点击事件
            changeMenu(item){
                this.$router.push({ name: item.name})
            },
            //tag删除事件
            handleClose(tag, index){
                const length = this.tags.length - 1
                this.close(tag)
                if (tag.name !== this.$route.name) {
                    return;
                }
                if (index === length){
                    this.$router.push({
                        name: this.tags[index - 1].name
                    })
                }else{
                    this.$router.push({
                        name: this.tags[index].name
                    })
                }
            }
        },
    }
</script>

<style lang="less" scoped>
    .tabs {
        padding: 20px;
        .el-tag {
            margin-right: 15px;
            cursor: pointer;
        }
    }
</style> 